<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 图标不是图片，需要放在文件的当前的目录之下，优先级较高 -->
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
    <!-- 文字图标的优先级较高，先引入后被css修改 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>小兔鲜官网</title>
</head>
<body>

    <!-- top1 -->
    <div id="topColumn1">
        <ul>
            <li><a href="#">请先登录</a></li>
            <li class="Cline"></li>
            <li><a href="#">我的注册</a></li>
            <li class="Cline"></li>
            <li><a href="#">我的订单</a></li>
            <li class="Cline"></li>
            <li><a href="#">会员中心</a></li>
            <li class="Cline"></li>
            <li><a href="#">帮助中心</a></li>
            <li class="Cline"></li>
            <li><a href="#">在线客服</a></li>
            <li class="Cline"></li>
            <li><a href="#"><i class="iconfont">&#xe678;</i>手机版</a></li>
        </ul>
    </div>

    <!-- top2 -->
    <div id="topColumn2">
        <div id="big01">
            <div id="simple1">
                <img src="./images/logo.png" alt="这是小兔鲜的logo设计">
            </div>
            <div id="simple2">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">生鲜</a></li>
                    <li><a href="#">美食</a></li>
                    <li><a href="#">餐厨</a></li>
                    <li><a href="#">电器</a></li>
                    <li><a href="#">居家</a></li>
                    <li><a href="#">洗护</a></li>
                    <li><a href="#">孕婴</a></li>
                    <li><a href="#">服装</a></li>
                </ul>
            </div>
            <div id="simple3">
                <div>
                    <i class="iconfont">&#xe67d;</i>
                    <input type="text" placeholder="请输入：">
                </div>
            </div>
            <div id="simple4"><i class="iconfont">&#xe746;</i></div>
        </div>
    </div>

    <!-- top3 -->
    <div id="topColumn3">
        <div id="big02">
            <img src="./uploads/banner1.png" alt="这是最新的时装照">
            <div id="leftBox1">
                <!-- 灵活使用，避免过于依赖div盒子 -->
                <ul>
                    <li>
                      <p>
                        <a href="#">生鲜</a>
                        <a href="#">水果</a>
                        <a href="#">蔬菜</a>
                      </p>
                      <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                    <li>
                      <p>
                        <a href="#">生鲜</a>
                        <a href="#">水果</a>
                        <a href="#">蔬菜</a>
                      </p>
                      <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                    <li>
                      <p>
                        <a href="#">生鲜</a>
                        <a href="#">水果</a>
                        <a href="#">蔬菜</a>
                      </p>
                      <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                    <li>
                      <p>
                        <a href="#">生鲜</a>
                        <a href="#">水果</a>
                        <a href="#">蔬菜</a>
                      </p>
                      <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                    <li>
                      <p>
                        <a href="#">生鲜</a>
                        <a href="#">水果</a>
                        <a href="#">蔬菜</a>
                      </p>
                      <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                    <li>
                      <p>
                        <a href="#">生鲜</a>
                        <a href="#">水果</a>
                        <a href="#">蔬菜</a>
                      </p>
                      <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                    <li>
                      <p>
                        <a href="#">生鲜</a>
                        <a href="#">水果</a>
                        <a href="#">蔬菜</a>
                      </p>
                      <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                    <li>
                      <p>
                        <a href="#">生鲜</a>
                        <a href="#">水果</a>
                        <a href="#">蔬菜</a>
                      </p>
                      <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                    <li>
                      <p>
                        <a href="#">生鲜</a>
                        <a href="#">水果</a>
                        <a href="#">蔬菜</a>
                      </p>
                      <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                    <li>
                      <p>
                        <a href="#">生鲜</a>
                        <a href="#">水果</a>
                        <a href="#">蔬菜</a>                        
                      </p>
                      <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                </ul>
            </div>
            <div id="rightBox1">
                <div id="zuodaohang"><i class="iconfont">&#xe685;</i></div>
                <div id="youdaohang"><i class="iconfont">&#xe687;</i></div>
            </div>
        </div>
    </div>

    <!-- img -->
    <div class="jing">
      <div class="hengzhede">
        <p style="width: 35px; position: absolute; left: 0%;"><h2>新鲜好物</h2></p>
        <p style="font-size: 16px; color: gray; position: absolute; left: 120px;">新鲜出炉 品质靠谱</p>
        <p style="font-size: 20px; color: gray;">查看全部&nbsp;></p>
      </div>
      <div class="hengzhedeimg">
        <img src="./uploads/goods1.png" alt="goods1">
        <h3>莫兰迪色KN95防护口罩</h3>
        <h1 style="color: brown;">￥79</h1>
      </div>
      <div class="hengzhedeimg">
        <img src="./uploads/goods2.png" alt="goods2">
        <h3>莫兰迪色KN95防护口罩</h3>
        <h1 style="color: brown;">￥79</h1>
      </div>
      <div class="hengzhedeimg">
        <img src="./uploads/goods3.png" alt="goods3">
        <h3>莫兰迪色KN95防护口罩</h3>
        <h1 style="color: brown;">￥79</h1>
      </div>
      <div class="hengzhedeimg">
        <img src="./uploads/goods4.png" alt="goods4">
        <h3>莫兰迪色KN95防护口罩</h3>
        <h1 style="color: brown;">￥79</h1>
      </div>
      <div class="hengzhede">
        <p style="width: 35px; position: absolute; left: 0%;"><h2>新鲜好物</h2></p>
        <p style="font-size: 16px; color: gray; position: absolute; left: 120px;">新鲜出炉 品质靠谱</p>
        <p style="font-size: 20px; color: gray;">查看全部&nbsp;></p>
      </div>
      <div class="hengzhedeimg">
        <img src="./uploads/goods1.png" alt="goods1">
        <h3>莫兰迪色KN95防护口罩</h3>
        <h1 style="color: brown;">￥79</h1>
      </div>
      <div class="hengzhedeimg">
        <img src="./uploads/goods1.png" alt="goods1">
        <h3>莫兰迪色KN95防护口罩</h3>
        <h1 style="color: brown;">￥79</h1>
      </div>
      <div class="hengzhedeimg">
        <img src="./uploads/goods1.png" alt="goods1">
        <h3>莫兰迪色KN95防护口罩</h3>
        <h1 style="color: brown;">￥79</h1>
      </div>
      <div class="hengzhedeimg">
        <img src="./uploads/goods1.png" alt="goods1">
        <h3>莫兰迪色KN95防护口罩</h3>
        <h1 style="color: brown;">￥79</h1>
      </div>
    </div>

    <!-- bottom2 -->
    <div id="bottom2">
      <div id="tuijian01">最新专题</div>
      <div class="tuijian2">
        <img src="./uploads/topic1.png" alt="top1">
        <p>不错</p>
      </div>
      <div class="tuijian2">
        <img src="./uploads/topic2.png" alt="top2">
        <p>不错</p>
      </div>
      <div class="tuijian2">
        <img src="./uploads/topic3.png" alt="top3">
        <p>不错</p>
      </div>
    </div>

    <!-- bottom1 -->
    <footer id="footer">
        <div class="w">
            <div class="slogan">
              <ul>
                <li>
                  <h5></h5>
                  <p>价格亲民</p>
                </li>
                <li>
                  <h5 class="two"></h5>
                  <p>价格亲民</p>
                </li>
                <li>
                  <h5 class="three"></h5>
                  <p>价格亲民</p>
                </li>
                <li>
                  <h5 class="four"></h5>
                  <p>价格亲民</p>
                </li>
              </ul>
            </div>
            <div class="service">
              <div class="service-left">
                <dl>
                  <dt>购物指南</dt>
                  <dd><a href="#">购物指南</a></dd>
                  <dd><a href="#">支付方式</a></dd>
                  <dd><a href="#">售后规则</a></dd>
                </dl>
                <dl>
                  <dt>购物指南</dt>
                  <dd><a href="#">购物指南</a></dd>
                  <dd><a href="#">支付方式</a></dd>
                  <dd><a href="#">售后规则</a></dd>
                </dl>
                <dl>
                  <dt>购物指南</dt>
                  <dd><a href="#">购物指南</a></dd>
                  <dd><a href="#">支付方式</a></dd>
                  <dd><a href="#">售后规则</a></dd>
                </dl>
                <dl>
                  <dt>购物指南</dt>
                  <dd><a href="#">购物指南</a></dd>
                  <dd><a href="#">支付方式</a></dd>
                  <dd><a href="#">售后规则</a></dd>
                </dl>
                <dl>
                  <dt>服务热线</dt>
                  <dd><a href="#">在线客服 <i class="iconfont icon-customer-service"></i></a></dd>
                  <dd><a href="#">客服电话 400-0000-000</a></dd>
                  <dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
                </dl>
              </div>
              <div class="service-right">
                <ul>
                  <li>
                    <img src="./images/app.png" alt="">
                    <p>微信公众号</p>
                  </li>
                  <li>
                    <img src="./images/app.png" alt="">
                    <p>APP下载二维码</p>
                  </li>
                </ul>
              </div>
            </div>
            <div class="copyright">
              <p>
                <a href="#">关于我们</a> |
                <a href="#">联系我们</a> |
                <a href="#">配送与验收</a> |
                <a href="#">商务合作</a> |
                <a href="#">搜索推荐</a> |
                <a href="#">友情链接</a>
              </p>
              <p>CopyRight © 小兔鲜</p>
            </div>
        </div>
    </footer>

    <!-- back -->
    <div id="back"><a href="#">Back</a></div>
</body>
</html>